<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'

defineProps<{ msg: string }>()

const title = ref('')

const count = ref(0)

const openFilePaths = ref<string[]>([]);

const changeTitle = () => {
  window.electronAPI.setTitle(title.value)
}

function openFile() {
  window.electronAPI.openFile().then(filePaths => {
    openFilePaths.value = filePaths
    console.log("🚀 ~ openFile ~ filePaths:", filePaths)
  })
}

const showItemInFolder = (filePath: string) => {
  window.electronAPI.showItemInFolder(filePath)
}

// 监听器
const removeListeners = ref<(() => void)[]>([]);

const notification = () => {
  new window.Notification('通知标题', { body: '通知内容', icon: 'https://www.electronjs.org/assets/img/logo.svg' })
    .onclick = () => console.log('通知点击')
}

onMounted(() => {
  removeListeners.value.push(window.electronAPI.onAsyncReply((response) => {
    console.log('收到异步回复:', response);
  }))

  removeListeners.value.push(window.electronAPI.onUpdateCounter((newCount) => {
    count.value = count.value + newCount
  }))

})

// 清理监听
onBeforeUnmount(() => {
  removeListeners.value.forEach(removeListener => {
    removeListener();
  });
});

</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
  <div>
    <input type="text" placeholder="输入标题" v-model="title" style="margin-right: 10px;" />
    <button type="button" @click="changeTitle" class="small-button">提交</button>
  </div>
  <div>
    <ul>
      <li v-for="(filePath, index) in openFilePaths" :key="index">
        <strong @click="showItemInFolder(filePath)" style="cursor:pointer">{{ filePath }}</strong>
      </li>
    </ul>
    <div style="display:flex; justify-content:center; gap:10px;">
      <button type="button" @click="openFile">打开文件</button>
      <button type="button" @click="notification">消息通知</button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}

.small-button {
  padding: 10px 18px;
  /* 调整按钮的内边距 */
  font-size: 12px;
  /* 调整按钮的字体大小 */
}
</style>
